<template>
  <div class="goodlist">
    <ul class="gooditems">
      <li
        v-for="item in goodsitem"
        :key="item.gid"
      >
      <van-swipe-cell :before-close="beforeClose">
        <ul class="goodsul">
          <li>
            <van-cell
              title="设备名称:"
              :value=item.gname
            />
          </li>
          <li>
            <van-cell
              title="设备型号:"
              :value=item.gmodel
            />
          </li>
          <li>
            <van-cell>设备品牌:<span>{{item.bandname}}</span><label class="num">可申数量:<span>{{item.kucun}}</span></label></van-cell>
          </li>
          <li>
            <van-field
              readonly
              clickable
              label="使用位置"
              :value="value"
              placeholder="选择使用位置"
              @click="showPicker = true"
            />
            <van-popup
              v-model="showPicker"
              round
              position="bottom"
            >
              <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
                @change="onChange"
              />
            </van-popup>
          </li>
          <li>
            <van-field
              readonly
              clickable
              label="任务编号"
              :value="task"
              placeholder="选择任务编号"
              @click="showTask = true"
            />
            <van-button
              round
              type="info"
              @click="showaddTask = true"
            >添加</van-button>
            <van-popup
              v-model="showTask"
              round
              position="bottom"
            >
              <van-radio-group v-model="radio2">
                <van-radio name="1">ZBSJGC20210921000023</van-radio>
                <van-radio name="2">ZBSJGC20210921000022</van-radio>
                <van-radio name="3">ZBSJGC20210921000423</van-radio>
                <van-radio name="4">ZBSJGC20210921000433</van-radio>
              </van-radio-group>
              <van-button
                type="info"
                @click="showaddTask = true"
              >添加</van-button>
              <van-button
                type="info"
                @click="showaddTask = false"
              >确认</van-button>
              <!-- <van-address-list
                    :list="list"
                    @add="onAdd"
                    @edit="onEdit"
                    /> -->
            </van-popup>
            <van-popup
              v-model="showaddTask"
              :style="{ width:'100%',height:'50%' }"
            >
              <van-dropdown-menu
                active-color="#1989fa"
                direction="up"
              >
                <van-dropdown-item
                  v-model="tasktypeval"
                  :options="tasktype"
                />
              </van-dropdown-menu>

              <van-field
                v-model="tasknum"
                name="tasknum"
                label="任务编号"
                placeholder="任务编号"
                :rules="[{ required: true, message: '请填写任务编号' }]"
              />
              <van-field
                v-model="taskname"
                type="password"
                name="taskname"
                label="任务名称"
                placeholder="任务名称"
                :rules="[{ required: true, message: '请填写任务名称' }]"
              />
              <div style="margin: 16px;float:right;padding-right:20px">
                <van-button type="info">关闭</van-button>
                <van-button
                  type="info"
                  native-type="submit"
                >提交</van-button>
              </div>

            </van-popup>
          </li>
          <li>
            <van-field
              name="stepper"
              label="申领数量"
            >
              <template #input>
                <van-stepper
                  :value="item.number"
                  min="1"
                  :max=item.kucun
                  integer
                />
              </template>
            </van-field>
          </li>
        </ul>
                      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
      </li>
    </ul>
    <van-goods-action>
      <van-goods-action-button
        color="#408FFB"
        type="danger"
        text="下一步"
        @click="gotodj()"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { Dialog } from 'vant';
const cities = {
  A区: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  福建: ['福州', '厦门', '莆田', '三明', '泉州'],
};
export default {
  data () {
    return {
      radio: 1,
      radio2: 1,
      value: '',
      task: '',
      taskname: '',
      tasknum: '',
      goodsitem: [
        { gid: 1, gname: '接入交换机', gmodel: 'jfsdfoso44444fhsofhsdfsdsdafsfdsfdsfdsfsdffsfsfsfsfsddfhfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
        { gid: 2, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
        { gid: 3, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
        { gid: 4, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
        { gid: 5, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
        { gid: 6, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false, number: 1 },
      ],
      showPicker: false,
      showTask: false,
      showaddTask: false,
      columns: [{ values: Object.keys(cities) }, { values: cities['A区'] }],
      list: [
        {
          id: '1',
          name: '项目',
          tel: '任务编号1',
          address: '任务名称',
          //   isDefault: true,
        },
        {
          id: '2',
          name: '集客',
          tel: '任务编号2',
          address: '任务名称2',
        },
      ],
      tasktypeval: '',
      tasktype: [
        { text: '任务类型', value: '' },
        { text: '集客', value: '集客' },
        { text: '项目工程', value: '项目工程' },
        { text: 'OA报告', value: 'OA报告' },
        { text: '其他', value: '其他' },

      ],
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    }
  },
  methods: {
    onConfirm (value) {
      this.value = value;
      this.showPicker = false;
    },
    onChange (picker, values) {
      picker.setColumnValues(1, cities[values[0]]);
    },
    onClickRight () {

    },
    gotodj () {
      this.$router.push('/apply/Lydinfoun')
    },
    onConfirmtask (value) {
      this.showaddTask = false;
      this.radio2 = value
    },
    beforeClose({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？',
          }).then(() => {
            instance.close();
          });
          break;
      }
    },
  },
}
</script>

<style>
.van-cell__value {
  text-align: left !important;
  min-width: 70%;
}
.van-cell__value span {
  display: inline-block;
  text-align: left;
  word-break: break-all;
}
.van-cell__title {
  margin-right: 0.32rem;
  width: 6.2em;
  vertical-align: middle;
  /* font-size: 0.14rem; */
}
.num {
  margin-left: 0.5rem;
}
.goodlist {
  margin-bottom: 110px;
}
.van-swipe-cell__right .van-button--square {
    height: 100%;
}
/* .van-stepper{margin-right: 0.32rem;
    display: inline-block;
}
.van-stepper .van-stepper__minus,.van-stepper .van-stepper__plus{
  background-color:#1989fa;
  color:#fff;
} */
</style>